In this article, I’m expaining about the angularjs binding and how to use it.
Start by setting up a div with ng-app directive and include the angular.min.js file using the angulatjs cdn :
<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="width=device-width"/>
<title>AngularJs Example</title>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<divng-app="">
</div>
</body>
</html>
When you write the ng-app directive in the <div> tag, then it tells you that everything in the <div> is belongs to the angularjs app and its also tells you the scope of the angularjs application.
Binding can be represented in AngularJS using the ng-bind directive or with double curly brackets. We can test this out by trying some expressions in our div:
<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="width=device-width"/>
<title>AngularJs Example</title>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<divng-app="">
{{3 + 2}}
{{"Mark" + "David"}}
{{3 * 9}}
</div>
</body>
</html>
Let try another example using the ng-bind directive:
<html>
<head>
<metaname="viewport"content="width=device-width"/>
<title>AngularJs Example</title>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<divng-app="">
<label>Firstname : </label>
<inputtype="text"ng-model="txtfirstname"/>
<label>Full Name : </label><spanng-bind="txtfirstname"></span>
</div>
</body>
</html>
Output:
As soon as, you typing the content in the textbox, you will see that the value of the textbox is reflecting in Full Name because we have bind the txtfirstname model to the span using ng-bing directive.Let try another example using two boxes and concatenate their values using the binding in angularjs:
<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="width=device-width"/>
<title>AngularJs Example</title>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<h2>AngularJs Binding Example</h2>
<divng-app="">
<label>Firstname : </label>
<inputtype="text"ng-model="txtfirstname"/>
<br/>
<br/>
<label>Lastname : </label>
<inputtype="text"ng-model="txtlastname"/>
<br/>
<br/>
<label>Full name : </label>{{txtfirstname + " " + txtlastname}}
</div>
</body>
</html>
Output
Leave Comment